<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Flotr: Mouse Zoom Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<!--[if IE]><script type="text/javascript" src="../../flotr/mootools/lib/excanvas.js"></script><![endif]-->
		<script type="text/javascript" src="../../flotr/mootools/lib/mootools-release-1.11.js"></script>
		<script type="text/javascript" src="../../flotr/mootools/flotr.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1>Flotr: Mouse Zoom Example</h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>This example show how to hook into events that are fired by Flotr. Note that the events are
			fired from the container element. Read more about the <a href="http://www.solutoire.com/flotr/docs/eventhooks/" title="Flotr Event Hooks">event hooks</a>.</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a> or the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<p><button id="reset-btn">Reset</button></p>
			<h2>The Code</h2>
			<pre><code class="javascript">/**
 * Global options object.
 */
var options = {
	selection:{mode:'xy'}
};

/**
 * Function displays a graph in the 'container' element, extending
 * the global options object with the optionally passed options.
 */
function drawGraph(opts){
	/**
	 * Clone the options, so the 'options' variable always keeps intact.
	 */
	var o = Object.extend(Object.clone(options), opts || {});
	/**
	 * Return a new graph.
	 */
	return Flotr.draw(
		$('container'), 
		[ d1, d2, d3 ],
		o
	);
}	

/**
 * Actually draw the graph.
 */
var f = drawGraph();			

/**
 * Hook into the 'flotr:select' event.
 */
$('container').addEvent('flotr:select', function(area){
	/**
	 * What happens: empty the container element, and draw a new 
	 * graph with bounded axis. The axis correspond to the selection
	 * you just made.
	 */
	f = drawGraph({
		xaxis: {min:area.x1, max:area.x2},
		yaxis: {min:area.y1, max:area.y2}						
	});
});

/**
 * Observe click event on the reset-btn. Reset the graph when clicked.
 * The drawGraph function wrapped in another function otherwise it get's 
 * an Event object passed as first argument, while it expects an options
 * object.
 */
$('reset-btn').addEvent('click', function(){drawGraph()});</code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			/**
			 * Wait till dom's finished loading.
			 */
			window.addEvent('domready', function(){
				/**
				 * Fill series d1 and d2.
				 */
				var d1 = [];
				var d2 = [];
				var d3 = [];
			    for(var i = 0; i < 40; i += 0.5){
			        d1.push([i, Math.sin(i)+3*Math.cos(i)]);
					d2.push([i, Math.pow(1.1, i)]);
					d3.push([i, 40 - i+Math.random()*10]);
				}
			    
				/**
				 * Global options object.
				 */
				var options = {
					selection:{mode:'xy'}
				};
				
				/**
				 * Function displays a graph in the 'container' element, extending
				 * the global options object with the optionally passed options.
				 */
				function drawGraph(opts){
					/**
					 * Clone the options, so the 'options' variable always keeps intact.
					 */
					var o = $extend($extend({},options), opts || {});
					/**
					 * Return a new graph.
					 */
					return Flotr.draw(
						$('container'), 
						[ d1, d2, d3 ],
						o
					);
				}	
				
				/**
				 * Actually draw the graph.
				 */
				var f = drawGraph();			
				
				/**
				 * Hook into the 'flotr:select' event.
				 */
				$('container').addEvent('flotr:select', function(area){
					/**
					 * What happens: empty the container element, and draw a new 
					 * graph with bounded axis. The axis correspond to the selection
					 * you just made.
					 */
					f = drawGraph({
						xaxis: {min:area.x1, max:area.x2},
						yaxis: {min:area.y1, max:area.y2}						
					});
				});
				
				/**
				 * Observe click event on the reset-btn. Reset the graph when clicked.
				 * The drawGraph function wrapped in another function otherwise it get's 
				 * an Event object passed as first argument, while it expects an options
				 * object.
				 */
				$('reset-btn').addEvent('click', function(){drawGraph()});
			});			
		</script>
		
		<!-- analytics -->
		
	</body>
</html>
